% V20210224 - 18.4.1 Javascript Signature Pad Demo

INCLUDE "GW.bas"

% Create a page.
p = GW_NEW_PAGE()

% Prepare title bar string.
GW_USE_THEME_CUSTO_ONCE("notext icon=back")
lbtn$  = GW_ADD_BAR_LBUTTON$(">BACK")
title$ = GW_ADD_BAR_TITLE$("Signature Pad Demo")

% Add title to page.
GW_ADD_TITLEBAR(p, lbtn$ + title$)

% Reference the "signature.js" script.
% Script must be placed in rfo-basic/data.
GW_INJECT_JS(p, "signature.js")

% Create a canvas to draw the signature.
% Canvas id must be 'newSignature' according to js script.
signaturepad$ = "<div id='canvas' style='width:276; margin:0 auto'><canvas class='roundCorners' id='newSignature' style='padding:0; margin:0; border:1px solid #c4caac'></canvas></div>"

% Inject the canvas in the page.
GW_INJECT_HTML(p, signaturepad$)

% Create and inject the script to initialize the signature pad.
script$ = "<script>signatureCapture();</script>"
GW_INJECT_HTML(p, script$)

% Add two buttons.
GW_ADD_BUTTON(p,"Save signature","SAVE")
GW_ADD_BUTTON(p,"Clear signature","CLEAR")

% And an inputbox.
GW_USE_THEME_CUSTO_ONCE("rows=10")
txt = GW_ADD_INPUTBOX(p, "data64", "")

% Render the page
GW_RENDER(p)

DO
 % Wait for user action.
 r$ = GW_WAIT_ACTION$()

 % Place here any necessary code to process user actions.

 % User pressed the Clear button.
 IF r$="CLEAR" THEN

  % Call javascript function contained in signature.js
  JS("signatureClear()")
  GW_MODIFY(txt, "input", "")

 % User pressed the Save button.
 ELSEIF r$="SAVE" THEN

  % Call javascript function contained in signature.js
  JS("signatureSave()")

  % This sends the base64 signature data to GW
  % > read it with GW_WAIT_ACTION$()
  sigdata$ = GW_WAIT_ACTION$()
  GW_MODIFY(txt, "input", sigdata$)

 END IF

% End when BACK key is pressed.
UNTIL r$ = "BACK"

END "End of Signature Pad Demo"